<template>
	       <!-- :model="ruleForm"与ruleForm对象进行数据绑定《通过prop》
			    :rules="rules" 数据校验
			-->
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
		  <el-form-item label="用户名称" prop="userName">
			<el-input v-model="ruleForm.userName"></el-input>
		  </el-form-item>
		  <el-form-item label="电话" prop="phone">
			<el-input v-model="ruleForm.phone"></el-input>
		  </el-form-item>
		  <el-form-item label="出生日期" >
			<el-col :span="11">
			  <el-form-item prop="birthday">
				<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.birthday" style="width: 100%;"></el-date-picker>
			  </el-form-item>
			</el-col>
		  </el-form-item>
		  <el-form-item label="性别" prop="gender">
			<el-radio-group v-model="ruleForm.gender">
			    <el-radio :label="1"></el-radio>
			    <el-radio :label="2"></el-radio>
			</el-radio-group>
		  </el-form-item>
		  <el-form-item label="地址" prop="address">
			<el-input type="textarea" v-model="ruleForm.address"></el-input>
		  </el-form-item>
		  <el-form-item>
			<el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
			<el-button @click="resetForm('ruleForm')">重置</el-button>
		  </el-form-item>
		</el-form>
</template>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          userName: '',
          phone: '',
          birthday: '',
          gender: '',
          address: ''
        },
        rules: {
          userName: [
            { required: true, message: '请输入用户名称', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' }
          ],
          birthday: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
		  gender: [
		      { required: true, message: '请选择性别' }
		   ],
          address: [
            { required: true, message: '请输入地址', trigger: 'change' }
          ],
          
        }
      };
    },
    methods: {
      submitForm(formName) {
		  let that  = this;
             this.$axios.post('http://localhost:8181/save',that.ruleForm).then((response) => {
               if(response.data == 'succend'){
				  that.$router.push('/UserList')
			   }
           		 		  
            })	
         
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
	 
  },
  created() {
    	let that  = this;
		//  this.$route.query.id   取出路由中的数据
    	this.$axios.get('http://localhost:8181/getUser?id='+this.$route.query.id).then((response) => {
    		 that.ruleForm =response.data
    			 		
         })	
  }
  }
</script>